<template>
  <div>
    <nav-top class="mnavtop" :menu_index="2"></nav-top>
    <!-- app定制开发 -->
    <div class="a_customized">
      <div class="customized_t">
        <h2>APP定制开发</h2>
        <p>移动时代，让客户随时随地联系你</p>
      </div>
      <div class="customized_b">
        <div class="message">
          <span>APP开发，是指专注于手机应用软件开发与服务。通常专指手机上的应用软件，或称手机客户端。主流的APP开发系统有IOS开发、APP开发，所需技术也分源生开发与混合开发两种。</span>
          <span>
            APP创新性开发，始终是用户的关注焦点，
            而商用APP客户端的开发，更得到诸多网络大亨们的一致关注与赞许。
            在传统广告、传统互联网与移动互联网融为一个整体的时候，企业和用户之间将可以非常方便
            地建立一个良性的闭合环：看到你了解你记住你，而这正是企业营销中最为理想的状态，也是互联网的价值， 或将成为未来的一种新趋势，影响着越来越多的用户和企业主。
          </span>
          <span>随着智能手机和iPad等移动终端设备的普及，人们逐渐习惯了使用APP客户端上网的方式，移动互联网时代也是全民的移动互联网时代，是每个人的时代，也是每个企业的时代。而且目前国内各大电商，均拥有了自己的APP客户端，这标志着，APP客户端的商业使用，已经逐渐普及。APP便捷了人们的生活，APP开发让各个 企业都开始了移动信息化进程。</span>
        </div>
        <div class="pic"></div>
      </div>
    </div>
    <!-- App定制开发服务是什么 -->
    <div :class="['a_service',service_flag?'a_service_active':'']">
      <div class="service_t">
        <h2>APP定制开发服务是什么</h2>
        <p>经营之道 立足之根</p>
      </div>
      <ul :class="a_ser_flag?'ser_b_active':''">
        <li>
          <div class="pic">
            <div class="pic_p">
              <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/01.png" alt="">
              <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/02.png" alt="">
            </div>
            <span>APP原生开发</span>
          </div>
          <div class="bot">
            <p>
              原生APP开发(Native App)即我们所称的传统APP开发模式，
              该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行
              开发
            </p>
          </div>
        </li>
        <li>
          <div class="pic">
            <div class="pic_p">
              <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/24.png" alt="">
              <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/21.png" alt="">
            </div>
            <span>APP混合开发</span>
          </div>
          <div class="bot">
            <p>混合APP开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式）</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <div class="pic_p">
              <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/20.png" alt="">
              <img class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/21.png" alt="">
            </div>
            <span>HTML5开发</span>
          </div>
          <div class="bot">
            <p>
              多年专注移动互联网开发，从客户项目对接到项目后期技术维护服务，
              在APP项目任一环节，我们都有专人负责进度和流程把控，为客户提供全流程解
              决方案。
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- App定制开发优势是什么 -->
    <div :class="['a_advantage',advantage_flag?'a_advantage_active':'']">
      <div class="advantage_top">
        <h2>APP定制开发优势是什么</h2>
        <p>因为我们是与众不同的，所以你也可以像我们一样</p>
      </div>
      <!-- 移动端轮播图 -->
      <swiper :options="swiperOption" ref="mySwiper" class="mSwip">
        <!-- slides -->
        <swiper-slide>
          <div class="lunbo">
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/2.png" alt /> -->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/appm/lb1.png" alt />
            <h5>IOS APP营收更容易</h5>
            <p>相对于Android用户来说，iPhone用户具有较高的消费能力，一方面来说苹果用户较为宽裕，另一方面IOS系统支付方式也很方便。</p>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="lunbo">
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/App/51.png" alt /> -->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/appm/lb2.png" alt />
            <h5>IOS系统机型少、适配性高</h5>
            <p>IOS机型少，所以IOS开发的适配性很高，IOS开发商可以针对性的进行APP开发，很少会出现机型不配的问题</p>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="lunbo">
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/4.png" alt /> -->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/appm/lb3.png" alt />
            <h5>Android系统用户数量多</h5>
            <p>截止到2017年2月，安卓系统在国内市场占有率达到86%，每5部手机中大约有4部安装了安卓系统</p>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="lunbo">
            <!-- <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/tubiao/5.png" alt /> -->
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/appm/lb4.png" alt />

            <h5>Android硬件条件丰富</h5>
            <p>硬件条件丰富源和安卓 系统开放性相关，众多厂商会推 出功能各异的多种产品</p>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>-->
        <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
      </swiper>

      <ul :class="adv_b_flag?'adv_b_flag':''">
        <li>
          <div class="pic">
            <img style="width:71px" class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/10.png" alt="">
            <img  style="width:71px" class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/11.png" alt="">
          </div>
          <h5>IOS APP营收更容易</h5>
          <p>相对于Android用户来说，iPhone用户具有较高的消费能力，一方面来说苹果用户较为宽裕，另一方面IOS系统支付方式也很方便。</p>
        </li>
        <li>
          <div class="pic">
            <img style="width:70px" class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/12.png" alt="">
            <img style="width:70px" class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/13.png" alt="">
          </div>
          <h5>IOS系统机型少、适配性高</h5>
          <p>IOS机型少，所以IOS开发的适配性很高，IOS开发商可以针对性的进行APP开发，很少会出现机型不配的问题</p>
        </li>
        <li>
          <div class="pic">
            <img style="width:70px" class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/14.png" alt="">
            <img style="width:70px" class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/15.png" alt="">
          </div>
          <h5>Android系统用户数量多</h5>
          <p>截止到2017年2月，安卓系统在国内市场占有率达到86%，每5部手机中大约有4部安装了安卓系统</p>
        </li>
        <li>
          <div class="pic">
            <img style="width:70px" class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/16.png" alt="">
            <img style="width:70px" class="pic_t" src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/17.png" alt="">
          </div>
          <h5>Android硬件条件丰富</h5>
          <p>硬件条件丰富源和安卓 系统开放性相关，众多厂商会推 出功能各异的多种产品</p>
        </li>
      </ul>
      <div :class="['advantage_bot',advantage_bot_flag?'advantage_bot_active':'']">
        <span>App开发流程</span>
        <ul>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/03.png" alt />
            <p>需求预评估</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/04.png" alt />
            <p>产品原型设计</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/05.png" alt />
            <p>UI设计</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/06.png" alt />
            <p>APP端开发</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/07.png" alt />
            <p>服务器端开发</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/08.png" alt />
            <p>接口联调</p>
          </li>
          <li>
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/iconapp/09.png" alt />
            <p>测试及验收</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 那些大咖选择我们 -->
    <!-- <div class="app_bigShot">
      <div class="app_bigShot_top">
        <h2>有哪些行业大咖选择我们</h2>
        <p>我们追求完美的创意设计和用户体验，更关注您的满意</p>
      </div>
      <div class="app_bigShot_bot">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,index) in newsList" :key="index">
              <img :src="item.src" alt="">
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>-->
    <shot class="app_shot"></shot>
  </div>
  <!-- </div> -->
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import navTop from '../Components/nav-one'
import shot from '../Components/shot'

export default {
  data() {
    return {
      advantage_flag: false, // 开发优势滚动
      service_flag: false, //定制开发特效
      a_ser_flag: false, // 定制服务 下
      adv_b_flag: false, //优势下
      advantage_bot_flag: false,
      swiperOption: {
        notNextTick: true,
        loop: true,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination'
        },

        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      swiperOption2: {
        notNextTick: true,
        loop: true,
        slidesPerView: 6,
        spaceBetween: 20,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        slidesOffsetBefore: 50,
        pagination: {
          el: '.swiper-pagination'
        },
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      }
    }
  },
  components: {
    swiper,
    swiperSlide,
    navTop,
    shot
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 6,
        hoverStop: true, //是否开启鼠标悬停stop
        openWatch: true, //开启数据实时监控刷新dom
        singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    handleScroll(e) {
      this.scroll = this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop // 执行代码
      // console.log(this.scroll);
      if (this.scroll > 470) {
        this.service_flag = true
      }
      if (this.scroll > 600) {
        this.a_ser_flag = true
      }
      if (this.scroll > 1120) {
        this.advantage_flag = true
      }
      if (this.scroll > 1300) {
        this.adv_b_flag = true
      }
      if (this.scroll > 1850) {
        this.advantage_bot_flag = true
      }
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/App/index.css');
@import url('../../assets/css/App/mindex.css');
</style>